<template>
  <div class="box">
    <el-row class="message item">
      <el-col :span="16">
        <label class="title">全部评论</label>
        <span class="count">(共有1390条评论)</span>
      </el-col>
      <el-col :span="8" class="sysBox">
        <el-pagination background layout="prev, pager, next" :total="comments.total"   @current-change="currentChange"></el-pagination>
      </el-col>
    </el-row>

    <el-row class="item">
      <el-col :span="2">
        <el-avatar
          :size="50"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
      </el-col>
      <el-col :span="10">
        <el-row>
          <el-col>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="content"></el-input>
          </el-col>
          <el-col class="p2">
            <el-row type="flex" justify="end">
              <span class="info">请您文明上网，理性发言，注意文明用语</span>
              <el-button type="danger" size="small" @click="sendComment()">发表评论</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 留言-->

    <el-row class="comment-list" v-for="(item,index) in comments.list" :key="index">
      <el-col :span="2">
        <el-avatar :size="50" :src="item.userAvatar"></el-avatar>
      </el-col>

      <el-col :span="10">
        <el-row>
          <el-col>
            <label class="user">{{item.userNickName}}</label>
          </el-col>
          <el-col class>
            <p class="content">{{item.content}}</p>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="comment-footer">
        <el-col :span="20">
          <label class="date">{{item.createTime|dateFormart}}</label>
        </el-col>
        <label class="praise" @click="increment(item)">
          <i class="el-icon-thumb"></i>
          <span>{{item.praiseCount}}</span>
        </label>
      </el-col>
      <el-col>
        <el-divider content-position="right"></el-divider>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["comment"],
  data() {
    return {
      comments:this.comment,
      content: "",
      count: 0
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.user.current;
    },
    
  },
  methods: {
    /**
     * 新增评论
     */
    async sendComment() {
      if (!this.isLogin) {
        this.$notify.warning({
          title: "错误",
          message: "当前用户尚未登录，不能评论"
        });
        return;
      }

      if ("" === this.content.trim()) {
        this.$notify.warning({
          title: "错误",
          message: "当前评论不能为空"
        });
        return;
      }
      let that = this;

      let { status, data } = await this.$axios.post("/api/comment/all", {
        content: that.content,
        workId: that.$route.params.id
      });
      console.log(data);
      this.comment.list.unshift(data);
      this.content = "";
    },
    /**
     * 新增点赞
     */
    async increment(item) {
      let that = this;
      let { status, data } = await this.$axios.patch(
        "/api/comment/praise/" + item.id
      );

      item.praiseCount++;
    },
    async currentChange(index) {
      this.pageIndex = index;
      let { status, data } = await this.$axios.get("/api/comment/all?workId=" + this.$route.params.id+"&page="+index);
      //这里不能直接修改props 所以 之前在绑定的时候用一个变量做承接props 
      this.comments = data;
    },
  }
};
</script>

<style   scoped>
.box {
  background: white;
  padding: 20px 60px;
  border: 1px #eee solid;
  margin-top: 40px;
}
.date {
  color: #666;
}

.title {
  color: #e1251b;
  font-size: 16px;
  font-weight: 600;
}
.count {
  font-size: 14px;
  color: #666;
}
.sysBox {
  justify-content: flex-end;
}
.bottom {
  margin-top: 50px;
}
.p2 {
  padding: 20px 0px;
}
.info {
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
.comment-list {
  padding: 40px 20px;
}
.item {
  padding: 40px 20px;
  border-bottom: #eee solid 1px;
}

.name {
  color: #252525;
  font-size: 13px;
  font-family: "PingFang SC", "Microsoft YaHei";
  margin-top: 10px;
  font-weight: 700;
}
.content {
  font-size: 13px;
  color: #666;
  margin-top: 15px;
  line-height: 22px;
}
.comment-footer {
  display: flex;
  padding: 0px 40px;
}

.praise {
  color: #666;
  cursor: pointer;
}
.praise i {
  margin-right: 4px;
}
.praise span {
  width: 80%;
}
</style>